<%@ include file="includes/head.jsp" %>

	<a href="/">Home</a>
	 <div id="links"> 
	 <a href="http://google.com">Google</a> 
	 <a href="http://ubuntu.com">Ubuntu</a> 
	 <a href="http://debian.org">Debian</a> 
	</div>

	<div id="frases">
		<div>Hola mundo!</div>
		<div>Foo bar</div>
		<div>Lorem Ipsum</div>
	</div>
		
		
		<span id="status">Hola mundo...</span>
		
		<form>
 <input type="text" id="nombre" value="Javier" />
 <input type="text" id="apellidos" value="Perez" />
</form>
<a href="#" onclick="document.getElementById('nombre').focus()">Nombre</a>
<a href="#" onclick="document.getElementById('apellidos').focus()">Apellidos</a> 
		
		<input type="text" id="texto" />
		<input type="button" value="Crear" onclick="crear()" />
			<input type="button" value="eliminar" onclick="eliminar()" />
		<ul id="lista"></ul>
		
		
		<script>
			function init(){
				//alert("Hello World");
				document.write('<h1>Hello World</h1>');
				
				// Función1: getElementById()
				var el = document.getElementById("status");
				console.info("Hemos cargado la variable 'el'" + el.innerHTML);
				
				var el2 = document.getElementById("status444444");
				if (el2 == undefined){
					console.error("No hemos encontrado elemento con id [status444444]");
				}
				
				
				 // Función 2: getElementsByTagName()
				 // Obtenemos el elemento con id "links" var 
				 links = document.getElementById("links"); 
				 // Ahora obtenemos todos los elementos con tag A que hay 
				 // dentro del elemento 'el' var 
				 as = links.getElementsByTagName("A"); 
				 // Y finalmente recorremos el array de elementos para 
				 // cambiarles el color a cada uno 
				 for (var i=0; i<as.length; i++) { 
				 as[i].style.color = 'red'; // negro 
				 }
				 
				 //3. Join
				// Creamos el array de nombres
				 var nombres = ['Luis','Javier','Sancho','Roberto','Rafael','Manuel'];
				 // Unimos todos los elementos separándolos por comas
				 var juntos = nombres.join(", ");
				 // Y lo mostramos
				 alert(juntos); 
				 
				 
				 
				 // Función4: split()
				 var juntos = "Luis, Javier, Sancho, Roberto";
				 var nombres = juntos.split(", ");
				 for (var i=0; i<= nombres.length-1;i++){
					 //str_replace(nombres[i],"wrld");
					 document.write(nombres[i] + "<br />");
				 }
				
				
				
				// Función5: addEventListener() / attachEvent()
				// Creamos la funcion para añadir eventos
				function nuevo_evento(elemento, evento, funcion) {
				 if (elemento.addEventListener) {
				 	elemento.addEventListener(evento, funcion, false);
				 } 
				 else {
				 	elemento.attachEvent("on"+ evento, funcion);
				 }
				 }
				 
				// Obtenemos los elementos DIV a los que queremos añadir nuestro evento onclick
				 var divs = document.getElementById("frases").getElementsByTagName("DIV");
				 // Recorremos todos los divs
				 for (var i=0; i<divs.length; i++) {
				 	// Añadimos el evento onclick al div
				 	nuevo_evento(divs[i], "click", function(){
				 	// Hacemos que muestre el contenido del DIV
				 alert(this.innerHTML); }
				 );
				 }
				 
				 // Función6: focus()
				
			}
			 // Función7: createElement() / appendChild()

			  function crear() {
				 // Obtenemos el valor entrado en la caja de texto
				 var valor = document.getElementById("texto").value;
				 // Creamos un nuevo elemento LI var
				 li = document.createElement("LI");
				 // Añadimos el valor introducido al nuevo elemento
				 li.innerHTML = valor;
				 // Añadimos el elemento LI a la lista UL
				 var ul = document.getElementById("lista");
				 ul.appendChild(li);
				 // Vaciamos la caja de texto
				 document.getElementById("texto").value = "";
			}
				 
			// Función8: removeChild()
			function eliminar(){
				// Obtenemos el elemento
				var el = document.getElementById("lista");
				// Obtenemos el padre de dicho elemento
				// con la propiedad “parentNode”
				var padre = el.parentNode;
				// Eliminamos el hijo (el) del elemento padre
				padre.removeChild(el);
			}
				window.onload = init();
		</script>
		
<%@ include file="includes/footer.jsp" %>